<script setup lang="ts">
import type { Visitor } from '@/types/visitor'
import { getVisitorListApi } from '@/services/visitor'
import { sexDesc, visitorTypeDesc } from '@/utils/common'
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useVisitorStore } from '@/stores/modules/visitor'

//接收页面参数
const props = defineProps<{ num: number }>()

// 获取出游人列表
const list = ref<Visitor[]>()
const getVisitorListData = async () => {
  const res = await getVisitorListApi()
  list.value = res.data
}

// 显示时加载
onShow(async () => {
  getVisitorListData()
})

let checkIds: string[] = []
const checkVisitor: UniHelper.CheckboxGroupOnChange = (ev) => {
  checkIds = ev.detail.value
}
const completed = () => {
  if (checkIds.length != props.num) {
    uni.showToast({ icon: 'error', title: '请选择数量与出游人数一致！' })
    return
  }
  let ret: Visitor[] = []
  checkIds.forEach((it) => {
    let ok = list.value?.find((item) => {
      return item.id == parseInt(it)
    })
    if (ok != null) {
      ret.push(ok)
    }
  })
  const visitorStore = useVisitorStore()
  visitorStore.changeVisitors(ret)
  uni.navigateBack()
}
</script>

<template>
  <view class="visitor-page">
    <view class="visitor-list">
      <checkbox-group @change="checkVisitor">
        <view class="item" v-for="it in list" :key="it.id">
          <view class="left">
            <view class="checkbox">
              <checkbox :value="'' + it.id" />
            </view>
            <view class="content">
              <view class="row">
                <view class="left-content big">{{ it.name }}</view>
                <view class="big">{{ sexDesc(it.sex) }}</view>
              </view>
              <view class="row">
                <view class="left-content">{{ visitorTypeDesc(it.type) }}</view>
                <view>{{ it.credentials }}</view>
              </view>
            </view>
          </view>
          <navigator class="right" hover-class="none" :url="`/pages/visitor/form?id=${it.id}`">
            <up-icon name="edit-pen" size="32"></up-icon>
          </navigator>
        </view>
      </checkbox-group>
    </view>
    <view class="btn-add-box">
      <navigator hover-class="none" url="/pages/visitor/form">增加出游人</navigator>
    </view>
    <view class="btn-complete-box" v-if="num > 0" @click="completed()">
      <view>完成</view>
    </view>
  </view>
</template>

<style lang="scss">
.visitor-page {
  padding: 0 32rpx;
  .visitor-list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 0;
      .left {
        display: flex;
        align-items: center;
        .content {
          margin-left: 32rpx;
          .row {
            display: flex;
            align-items: center;
            font-size: $fs-md;
            line-height: 1.6em;
            color: $u-content-color;
            .big {
              font-size: $fs-lg;
              color: $u-main-color;
            }
            .left-content {
              width: 140rpx;
            }
          }
        }
      }
    }
  }
  .btn-add-box,
  .btn-complete-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 16px;
    view,
    navigator {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160px;
      font-size: $fs-lg;
      color: $c-main;
      border: 1px solid $c-main;
      line-height: 36px;
      border-radius: 18px;
    }
  }
  .btn-complete-box view {
    background-color: $c-main;
    color: #fff;
  }
}
</style>
